<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>欢迎来到炉石传说</title>
</head>

<style type="text/css">
body{
	background: url(https://img2.tapimg.com/bbcode/images/194678fe1af8e1922d00bd1fc5f218a0.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
	background-color: black;
}
.header{
	background-color: #f1f1f1;
	padding:10px 30px;
	margin:0px;
	text-align: 
}
.search{
	padding: 12px 20px 12px 40px;
	border:2px solid #ccc;
	border-radius: 6px;
	margin-top: 8px;
	margin-right: 15%;
	font-size:17px;
	position: absolute;
	left:70%;
	top: 30px;
	width:10%;
	background-image: url('https://static.runoob.com/images/mix/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
	transition: width 0.4s ease-in-out;
}
.search:focus{
	width: 25%;
}
.topnav{
	overflow: hidden;
	background:#FFB90F;
}
.topnav a{
	float: left;
	display: block;
	color:white;
	text-align: center;
	padding: 14px 16px;
	text-decoration:none;
	font-size:15px;
	transition-duration: 0.6s;
}
.topnav a:hover{
    color:black;
    background-color: white;
}
</style>
<body>

<div class="header">
	<h1>炉石传说</h1>
	<input type="text" class="search" placeholder="搜索...">
</div>

<div class="topnav">
    <a href="#">新闻</a>
    <a href="#">游戏指南</a>
    <a href="#">视频图片</a>
    <a href="#">卡牌工具</a>
    <a href="file:///E:/web/work2.html" style="float:right" target="_blank">注册</a>
    <a href="file:///E:/web/work1.html" style="float:right" target="_blank">登陆</a>
</body>

</html>